<script>
  export default {
    name: 'assign-store-dialog',
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 商店列表
        storeList: [],
        // 审核员用户列表
        userList: [],
        // 状态枚举列表
        statusEnumList: [],
        // 分单方式枚举列表
        assignTypeEnumList: [],
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false
      }
    },
    filters: {
      /**
       * 值向名称映射
       * @param {number}               value    值
       * @param {Array<{name, value}>} enumList 枚举列表
       */
      valueFormat(value, enumList) {
        for (let element of enumList) {
          if (element.value === value) {
            return element.name;
          }
        }
        return '';
      }
    },
    methods: {
      /**
       * 初始化商店审核分单弹出框
       * @param {Array}               storeList          商店列表
       * @param {Array<{name,value}>} userList           审核员用户列表
       * @param {Array<{name,value}>} statusEnumList     审核员用户列表
       * @param {Array<{name,value}>} assignTypeEnumList 审核员用户列表
       */
      initDialog(storeList, userList, statusEnumList, assignTypeEnumList) {
        // 打开弹出框
        this.visible = true;

        this.storeList = JSON.parse(JSON.stringify(storeList));
        this.userList = JSON.parse(JSON.stringify(userList));
        this.statusEnumList = statusEnumList;
        this.assignTypeEnumList = assignTypeEnumList;
      },
      /**
       * 商店分单选择事件
       * @param {Object} user 用户对象
       */
      assignStoreHandle(user) {
        this.$confirm(`您确定要将商店分单给【${user.userName}】用户审核吗？`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        .then(() => {
          // let storeList = this.storeList;
          // for (let store of storeList) {
          //   if (store.auditUser === user.userId) {
          //     this.$message({
          //       showClose: true,
          //       message: `【${store.name}】商店已经分单给【${user.userName}】用户，请重新选择商店后操作`,
          //       type: 'warning',
          //       offset: 100
          //     });
          //     // 中断promise执行
          //     return Promise.reject();
          //   }
          // }
          this.buttonLoad = true;
          let body = {
            storeVoList: this.storeList.map(store => {
              return {
                id: store.id,
                storeId: store.storeId,
                submitType: store.submitType
              }
            }),
            userId: user.userId
          }
          return this.$axios.$post('/assign-store/assign', body)
        })
        .then(({ data }) => {
          if (data) {
            this.notify('info', '提示', data);
          }
          // 关闭弹出框
          this.closeDialogHandle(true);
        })
        .catch(err => {
          if (err.code === 409) {
            // 关闭弹出框
            this.closeDialogHandle(true);
          }
        })
        .finally(() => {
          this.buttonLoad = false;
        });
      },
      /**
       * 移除商店事件
       * @param {Object} store 商店对象
       */
      deleteStoreHandle(store) {
        this.buttonLoad = true;

        this.storeList = this.storeList.filter(_store => _store.id !== store.id);

        this.buttonLoad = false;
      },
      /**
       * 关闭弹出框事件
       * @param {boolean | function} refresh 是否刷新父级组件数据
       */
      closeDialogHandle(refresh) {
        this.storeList = [];
        this.userList = [];

        if (typeof refresh === 'function') {
          refresh = false;
        }
        if (refresh) {
          this.$emit('refresh-table');
        }
        this.$nextTick(() => {
          this.visible = false;
        })
      }
    }
  }
</script>

<template>
  <el-dialog
    title="商店审核分单"
    :visible.sync="visible"
    width="65%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
    class="assign-store-dialog"
  >
    <el-table
      :data="storeList"
      :max-height="300"
      ref="storeTable"
      class="store-table"
    >
      <el-table-column prop="name" header-align="center" align="center" label="商店名称"></el-table-column>
      <el-table-column prop="userName" header-align="center" align="center" label="所属用户"></el-table-column>
      <el-table-column prop="statusName" header-align="center" align="center" label="商店状态" width="80">
      </el-table-column>
      <el-table-column prop="submitCount" header-align="center" align="center" label="提交次数" width="80">
      </el-table-column>
      <el-table-column prop="submitTime" header-align="center" align="center" label="提交时间"></el-table-column>
      <el-table-column prop="auditUserName" header-align="center" align="center" label="审核员"></el-table-column>
      <el-table-column prop="assignTime" header-align="center" align="center" label="分单时间"></el-table-column>
      <el-table-column prop="submitTypeName" header-align="center" align="center" label="提交类型" width="95">
      </el-table-column>
      <el-table-column prop="assignTypeName" header-align="center" align="center" label="分单方式" width="80">
      </el-table-column>
      <el-table-column
        header-align="left"
        width="100"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" :disabled="buttonLoad || storeList.length === 1" icon="el-icon-delete"
                     @click="deleteStoreHandle(row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="line"></div>
    <el-table
      :data="userList"
      :max-height="300"
      ref="userTable"
      class="user-table"
    >
      <el-table-column prop="userName" header-align="center" align="center" label="用户名称"></el-table-column>
      <el-table-column prop="waitAuditCount" header-align="center" align="center" label="待审核商店数"></el-table-column>
      <el-table-column prop="dayAuditCount" header-align="center" align="center" label="今日审核数"></el-table-column>
      <el-table-column prop="monthAuditCount" header-align="center" align="center" label="当月审核数"></el-table-column>
      <el-table-column
        header-align="left"
        width="100"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" :disabled="storeList.length === 0 || buttonLoad" icon="el-icon-thumb"
                     @click="assignStoreHandle(row)">
            选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>
  .assign-store-dialog >>> .el-dialog__body {
    padding: 20px 20px 30px;
  }
  .assign-store-dialog .line {
    margin: 18px 0;
    border-bottom: 2px dashed;
  }
</style>
